<?php
    if (!defined('CUR_DIR')) {
        die('【错误】未定义__DIR__');
    }
    $names = explode(DIRECTORY_SEPARATOR, CUR_DIR);
    $curDirName = array_pop($names);
?>
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="description" content="">
        <meta name="author" content="">
        <link rel="icon" href="/system/assets/logo/lightbulb.png"/>
        <title><?php echo $curDirName; ?></title>

        <link href="/system/assets/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="/system/assets/css/rudon.css" rel="stylesheet"/>
        
        <script src="/system/assets/jquery/3.6.0/jquery.min.js"></script>
        <script src="/system/assets/bootstrap/3.4.1/js/bootstrap.min.js"></script>

        <script src="/system/mirror/unpkg.com/vue@3.4.23/dist/vue.global.prod.js"></script>


        <style type="text/css">
            a {
                text-decoration: none!important;
            }
        
            .smallBox div {
                margin-top: 30px;
                /*padding-bottom: 30px;*/ 
                /*display: inline-block;*/
            } 

            .innerWrapper {
                border: 1px #dde solid; border-radius: 9px; min-height: 180px;  background: rgb(247,247,247);
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <div id="app">

            <nav class="navbar navbar-inverse">
                <div class="container">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="/" style="color: white;">
                            <span class="opacity50">&lt;</span> 返回
                        </a>
                    </div>
                    <!--/.navbar-collapse -->
                </div>
            </nav>
            
            <div class="container minHeight500px">
                <!-- Example row of columns -->
                <div class="row">
                    
                    <div 
                        class="col-md-12 smallBox"
                        v-for="(item, index) in pd.list"
                    >
                        <div class="innerWrapper">
                            <a :href="item.url">
                                <h3>
                                    {{ item.name }}
                                </h3>
                            </a>
                            <p>
                                {{ item.desc }}
                            </p>
                            <div class="rowStartAlignCenter flexAutoLineBreaking">
                                <a 
                                    target="_blank" 
                                    :href="itemS.url"
                                    v-for="(itemS, indexS) in item.versions"
                                    :key="'indexS'+indexS"
                                    class="label label-primary marginBottom5 marginRight10 fontSize14"
                                >
                                    {{ itemS.name }}
                                </a>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <hr>
                <br />

                <div class="beian-wrapper" style="position: fixed; z-index: 100100; bottom: 10px; left: 0; text-align: center; width: 99%;" ondblclick="this.style.display = 'none';">
                    <a href="https://beian.miit.gov.cn" target="_blank" style="text-decoration: none; color: #9C9C9C; font-size:12px;" title="粤ICP备2024301841号-1">
                        粤ICP备2024301841号
                    </a>
                </div>
            </div>
            <!-- /container -->

            
            <br/>
            <br/>
            <br/>
            <br/>
            
        </div>

        <script>
            const { createApp, ref, reactive, onMounted, computed } = Vue
            
            createApp({
                setup() {
                    const pd = reactive({
                        search: '',
                        list: []
                    })

                    const clog = (...args) => {
                        console.log(...args)
                    }

                    const initList = () => {
                        ajaxPost('/?api=list', {name:'<?php echo $curDirName; ?>'}).then(r=>{
                            clog(r)
                            if (!r) {
                                return alert('获取列表失败')
                            }
                            if (r.code != 1) {
                                return alert(r.msg)
                            }
                            pd.list = r.data
                            clog(pd.list)
                        }).catch(e=>{
                            clog(e)
                            alert('获取列表失败')
                        }).finally(()=>{

                        })
                    }

                    const ajaxPost = (url, data = {}) => {
                        return new Promise((resolve, reject)=>{
                            $.ajax({
                                url: url,
                                method: 'post',
                                dataType: 'json',
                                data: data,
                                success: r=>{
                                    resolve(r)
                                },
                                error: e=>{
                                    reject(e)
                                }
                            })
                        })
                    }

                    onMounted(()=>{
                        initList()
                    })

                    return {
                        pd
                    }
                }
            }).mount('#app')
            </script>
    </body>
</html>
